<template>
  <div class="app-container">
    <!-- 添加或修改报修项目对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body v-drag-fullscreen>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form-flex">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-form-item label="报修项目" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="上级项目" prop="parentId">
              <treeselect
                v-model="form.parentId"
                :options="projectOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择上级项目"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="标准工时" prop="standardLaborTime">
              <el-input v-model="form.standardLaborTime" placeholder="请输入标准工时" :disabled="disabled">
                <span slot="append">分钟</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="管理岗位" prop="managerialPosition">
              <el-input v-model="form.managerialPosition" placeholder="请输入管理岗位" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="执行岗位" prop="executivePosition">
              <el-input v-model="form.executivePosition" placeholder="请输入执行岗位" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="允许抢单" prop="grabSingle">
              <el-radio-group v-model="form.grabSingle" :disabled="disabled">
                <el-radio
                  v-for="item in dict.sys_yes_no"
                  :key="item.dictValue"
                  :label="item.dictValue"
                >{{item.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status" :disabled="disabled">
                <el-radio
                  v-for="item in dict.sys_normal_disable"
                  :key="item.dictValue"
                  :label="item.dictValue"
                >{{item.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="排序序号" prop="orderNum">
              <el-input v-model.number="form.orderNum" placeholder="请输入排序序号" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24">
            <el-form-item label="维修指引" prop="maintenanceGuidelines">
              <el-input v-model="form.maintenanceGuidelines" type="textarea" placeholder="请输入内容" :disabled="disabled"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRepairProject , addRepairProject, updateRepairProject ,treeselect} from "@/api/workorder/repairProject";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "RepairProjectFrom",
  dicts: [   'sys_normal_disable', 'sys_yes_no'  ],
  components:{ Treeselect },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否禁用
      disabled: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        projectName: [
          {required: true, message: "报修项目不能为空", trigger: "blur"}
        ],
        parentId: [
          {required: true, message: "上级项目不能为空", trigger: "blur"}
        ],
      },
      projectOptions:[],
      currentNode:{}
    };
  },
  created() {
    this.getTreeselect()
  },
  methods: {
    show(option){
      this.reset();
      this.open = true;
      this.title = "新增报修项目";
      this.currentNode = option.currentNode
      this.form.parentId =  option.currentNode.id
    },
    getTreeselect() {
      treeselect().then(res => {
        this.projectOptions = [];
        this.projectOptions = [{ label:'报修项目',id: '0',modelType:'',children: res.data}]
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.$emit("cancel")
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        parentId: null,
        projectName: null,
        standardLaborTime: null,
        managerialPosition: null,
        executivePosition: null,
        grabSingle: 'N',
        maintenanceGuidelines: null,
        status: "0",
        ancestors: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        orderNum: 0
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addRepairProject(this.form).then(response => {
            this.msgSuccess("新增成功");
            this.open = false;
            this.reset();
            this.$emit("ok")
          });
        }
      });
    }
  }
};
</script>
